<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋美团大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>

<body>
    <!-- <div class="test">测试</div> -->

    <!-- 头部 -->
    <header>
        <h1>千锋🤝美团大数据可视化平台</h1>
        <span>2022年3月14日15时12分19秒</span>
    </header>
    <!-- 头部 -->

    <!-- 图表 -->
    <section class="charts">
        <div class="column">
             <h1 style="color: white; font-size: 24px;position:absolute;top: .2rem;left: .2rem;">标题样式</h1>
            <div class="box" style="height: 4rem;">
                
            </div>
            <div class="box box2" style="height: 2.66rem;position:relative;overflow: hidden;padding-left: .3rem;">
                &nbsp&nbsp&nbsp&nbsp<span>单号</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>金额</span>&nbsp<span>品名</span>&nbsp&nbsp<span>时间</span>
                <div class="main" style="position: relative; height: 2rem; overflow: hidden;">
                    <div class="main1" style="position:absolute;">
                        <div>100021415 199 手机 18小时</div>
                        <div>100021415 199 手机 18小时</div>
                        <div>100021415 199 手机 18小时</div>
                        <div>100021415 199 手机 18小时</div>
                        <div>100021415 199 手机 18小时</div>
                    </div>
                </div>
            
            </div>
            <div class="box zuo3" style="height: 2.3rem;"></div>
        </div>
        <div class="column column1">
            <div class="column1box" style="height: 2.3rem;">
                    <div class="div1" style="display:flex;flex-direction: column;">   
                    <h1>总体情况<span>(单位：元)</span></h1>
                    <h1 style="color: pink; font-size: .7rem;">995568819</h1>
                    </div>
                    <div class="div2" style="display: flex;">
                        <div><span >标题样式</span><div class="quan1"></div></div>
                        <div><span style="color: white;">标题样式</span><div class="quan2"></div></div>
                        <div><span style="color: white;">标题样式</span><div class="quan3"></div></div>

                    </div>
            </div>
            <div class="box box-m2" style="height: 3.5rem;"></div>
            <div class="box box-m3" style="height: 3.4rem;"></div>
        </div>
        <div class="column">
            <div class="box rbox1" style="height: 3rem;">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br></td>
                        <td>100%<br></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>百度公司</td>
                        <td>923823万</td>
                        <td>21%</td>
                    </tr>
                    <tr>
                        <td><span>3</span></td>
                        <td>新浪</td>
                        <td>1240253万</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>雅虎</td>
                        <td>13423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
            </div>
        <div class="box rbox1" style="height: 3rem;">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br></td>
                        <td>100%<br></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>百度公司</td>
                        <td>923823万</td>
                        <td>21%</td>
                    </tr>
                    <tr>
                        <td><span>3</span></td>
                        <td>新浪</td>
                        <td>1240253万</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>雅虎</td>
                        <td>13423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
        </div>
            <div class="box you3" style="height: 3.2rem;"></div>
        </div>
    </section>
    <!-- 图表 -->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.zhimg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/quan1.js"> </script>
    <script src="./assets/js/quan2.js"> </script>
    <script src="./assets/js/quan3.js"> </script>
    <script src="./assets/js/l3.js"></script>
    <script src="./assets/js/you3.js"></script>
    <script src=""></script>
    <script>
        let num = 0
        setInterval(() => {
            $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
            num -=.01
            document.querySelector('.main1').style.top  = num + "rem"
            if(document.querySelector('.main1') .style.top>=-0.4 +"rem")  num=0
        }, 100)
    </script>

</body>

</html>